$(function () {
    let layer = layui.layer
    let form = layui.form

    //编辑
    function editForm() {
        //接收编辑时对应的id
        let id = location.href.split('=')[1]
        //发送ajax
        axios({
            method: 'GET',
            url: '/my/article/' + id
        }).then(function (res) {
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            // 表单赋值
            form.val('formEdit', res.data.data)
            // 富文本区域赋值
            setTimeout(() => {
                tinyMCE.activeEditor.setContent(res.data.data.content)
            }, 1000);
            // 封面 赋值
            let baseURL = 'http://api-breakingnews-web.itheima.net'
            let url = baseURL + res.data.data.cover_img
            $image.cropper('destroy')
                .attr('src', url)
                .cropper(options)
        })
    }



    // 渲染下拉菜单里的文章分类
    initArtName()

    function initArtName() {
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(function (res) {
            // console.log(res);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }

            let arr = [`<option value="">请选择文章类别</option>`]
            //遍历
            res.data.data.forEach(element => {
                arr.push(`
                  <option value="${element.Id}">${element.name}</option>
              `)
            })
            //接收拼接后的字符串
            let str = arr.join('')
            // console.log(str);
            //成功后渲染
            $('[name=cate_id]').empty().html(str)
            // 动态创建的表单需要渲染时使用 form.render(type,filter())更新表单
            // 默认更新全部 也可以在type选择更新的部分
            form.render()

            // 给修改的表单赋值
            editForm()
        })
    }

    //初始化富文本编辑器
    initEditor()

    //选择封面 图片
    // 初始化图片裁剪器
    var $image = $('#image')
    // 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }
    // 初始化裁剪区域
    $image.cropper(options)




    //文章状态的校验 
    // 点击按钮 构建状态 :已发布 或 草稿
    let state = ''
    $('#republic').on('click', function () {
        state = '已发布'
    })
    $('#draft').on('click', function () {
        state = '草稿'
    })

    //文章发布表单提交
    $('#formPub').on('submit', function (ev) {
        ev.preventDefault()
        //需要的参数是FormData类型的
        //先生成FormData对象
        let fd = new FormData(this)
        //为fd添加状态字段 :state
        // 判断文章的发布状态
        fd.append('state', state)

        //获取cropper预览区域的文件对象
        //添加文章封面 生成图片是异步操作
        //所以结果是函数里操作
        //ajax也要写到回调函数里
        $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
            width: 400,
            height: 280
        }).toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
            //得到文件对象后续的操作
            fd.append('cover_img', blob)
            // console.log(...fd);
            // 文件上传
            axios({
                method: 'POST',
                url: '/my/article/edit',
                data: fd
            }).then(function (res) {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message)
                }
                layer.msg('修改文章成功！')
                // location.href = '/article/art_list.html'
                //跳转
                setTimeout(() => {
                    window.parent.document.querySelector('#theList').click()
                }, 1500);
            })
            // jQuery

        })

    })

    // 选择文章封面按钮
    $('#chooseImgBtn').on('click', function () {
        $('#chooseImgInp').click()
    })

    // 把选择的封面渲染到裁剪区
    $('#chooseImgInp').on('change', function (e) {
        //获取 文件对象
        let file = e.target.files[0]
        //判断
        if (file === undefined) {
            return layer.msg('未选择文件！')
        }
        // 更换图片
        let newImgURL = URL.createObjectURL(file)
        //销毁旧区域 重新获取路径 然后重新初始化裁剪区域
        $image.cropper('destroy')
            .attr('src', newImgURL)
            .cropper(options)
    })
})
